<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>扫雷</title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		*{
			box-sizing: border-box;
		}
		table{
			margin: 50px auto;
		}
		td{
			width:30px;
			height: 30px;
		}
		td div{
			height: 30px;
			position: relative;
		}
		td img{
			width: 100%;
		}
		.flag{
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
	<body>
		<div id='app'>
			<table cellspacing=0 cellpadding=0>
				<tr v-for='row in list'>
					<td v-for='col in row'>
						<!-- 关闭的格子 -->
						<div v-if='col.closed' @click="open(col)" @click.right.prevent='flag(col)'>
							<img src="images/closed.svg" alt="">
							<img class="flag" v-if='col.flag' src="images/flag.svg" alt="">
						</div>
						<!-- 打开的格子 -->
						<div v-else @click="openSafe(col)">
							<img v-if="col.value == -1" src="images/mine.svg" alt="">
							<img v-else :src="'images/type'+col.value+'.svg'" alt="">
						</div>
					</td>
				</tr>
			</table>
		</div>
		<script src="js/saolei.js"></script>
	</body>
</html>